<template>
  <view class="filter-page">
    <!-- 顶部导航栏 -->
    <view class="top-bar">
      <text class="nav-btn cancel" @click="back">取消</text>
      <text class="nav-title">条件筛选</text>
      <text class="nav-btn confirm" @click="submitRecruitInfoVO">确认</text>
    </view>

    <!-- 主体内容区（左右布局） -->
    <view class="content-container">
      <!-- 左侧筛选列表 -->
      <view class="left-panel">
        <view 
          v-for="(item, index) in filterItems" 
          :key="index"
          class="filter-item" 
          :class="{ 
            'required': item.required, 
            'selected': currentTab === index 
          }"
          @click="switchTab(index)">
          <text class="item-label">{{ item.label }}</text>
        </view>
      </view>

      <!-- 右侧内容区（动态切换） -->
      <view class="right-panel">
        <!-- 公司资质选择 -->
        <template v-if="currentTab === 0">
          <checkbox-group @change="(e) => newRecruitInfoVO.companyType = e.detail.value">
            <label class="option-item" v-for="(option, i) in qualificationOptions" :key="i">
              <checkbox :value="option.value" :checked="newRecruitInfoVO.companyType.includes(option.value)" />
              <text>{{ option.label }}</text>
            </label>
          </checkbox-group>
        </template>

        <!-- 公司规模选择 -->
        <template v-else-if="currentTab === 1">
          <checkbox-group @change="(e) => newRecruitInfoVO.companySize = e.detail.value">
            <label class="option-item" v-for="(option, i) in companySizeOptions" :key="i">
              <checkbox :value="option.value" :checked="newRecruitInfoVO.companySize.includes(option.value)" />
              <text>{{ option.label }}</text>
            </label>
          </checkbox-group>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
import {getPositionTypeAndFirst} from '@/api/user.js'

export default {
  data() {
    return {
      currentTab: 0,
      filterItems: [
        { label: '公司资质:', required: false },
        { label: '公司规模:', required: false }
      ],
      qualificationOptions: [
        { value: '上市', label: '上市' },
        { value: '国企', label: '国企' },
        { value: '外企', label: '外企' }
      ],
      companySizeOptions: [
        { value: '20人以下', label: '20人以下' },
        { value: '20~99人', label: '20~99人' },
        { value: '99~300人', label: '99~300人' },
        { value: '300人以上', label: '300人以上' }
      ],
      newRecruitInfoVO: {
        companyType: [],
        companySize: []
      }
    }
  },
  onLoad() {
    // 初始化数据
    const storedData = uni.getStorageSync("newRecruitInfoVO");
    this.newRecruitInfoVO = storedData || {
      companyType: [],
      companySize: []
    };
  },
  methods: {
    switchTab(index) {
      this.currentTab = index;
    },
    
    submitRecruitInfoVO() {
      uni.setStorageSync("newRecruitInfoVO", this.newRecruitInfoVO);
	  uni.$emit('mainPageRefresh');
      uni.switchTab({
        url: '/pages/zcy/main'
      });
    },
    
    back() {
      uni.navigateBack();
    }
  }
}
</script>

<style scoped>
.filter-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #fff;
}

.top-bar {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  border-bottom: 1px solid #eee;
}

.nav-btn {
  font-size: 28rpx;
  color: #007aff;
}

.nav-title {
  font-size: 32rpx;
  font-weight: bold;
}

.content-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.left-panel {
  width: 300rpx;
  border-right: 1px solid #eee;
  padding: 20rpx;
}

.filter-item {
  margin-bottom: 24rpx;
  font-size: 28rpx;
  line-height: 44rpx;
  padding: 8rpx 12rpx;
  border-radius: 8rpx;
  transition: background-color 0.3s;
}

.filter-item:active {
  background-color: #f9f9f9;
}

.filter-item.required .item-label::before {
  content: "*";
  color: red;
  margin-right: 4rpx;
}

.filter-item.selected {
  background-color: #f5f5f5;
  font-weight: bold;
}

.item-label {
  color: #666;
}

.filter-item.selected .item-label {
  color: #333;
}

.right-panel {
  flex: 1;
  padding: 20rpx 32rpx;
  background-color: #f9f9f9;
  overflow-y: auto;
}

.option-item {
  display: flex;
  align-items: center;
  margin-bottom: 28rpx;
  padding: 16rpx 0;
  font-size: 28rpx;
}

radio, checkbox {
  margin-right: 16rpx;
  transform: scale(0.9);
}
</style>